<template>
    <div class="container">
        <div class="add-btn">
            <el-button type="primary" @click="handleDrawer">新增群发</el-button>
        </div>
        <div class="search-content">
            <el-form :model="searchContent" ref="searchFrom" :inline="true">
                <el-form-item prop="name" label="群发名称：">
                    <el-input 
                        v-model="searchContent.name" placeholder="群发名称" maxlength="32">
                    </el-input>
                </el-form-item>
                <el-form-item prop="type" label="群发类型：">
                    <el-select v-model="searchContent.type" clearable>
                        <el-option 
                            v-for="item of getActionType" :value="item.id" :label="item.name" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="触达时间：">
                    <el-date-picker
                        v-model="selectTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间" 
                        end-placeholder="结束时间"
                        value-format="timestamp"
                        format="yyyy-MM-dd HH:mm"
                        :default-time="['00:00:00', '23:59:59']"
                        @change="handleDateChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch(true)">搜索</el-button>
                    <el-button type="primary" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :default-sort="{prop: 'id'}">
                <el-table-column 
                    type="index" label="序号" width="80" align="center" :index="elTableIndex">
                </el-table-column>
                <el-table-column 
                    prop="name" label="群发名称" min-width="190" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="type" label="群发类型" min-width="140" align="center">
                    <template #default="{ row }">
                        {{ actionType[row.type] ? actionType[row.type].name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column 
                    prop="trigger_time" label="预定触达员工时间" min-width="170" align="center" #default="{ row }">
                    {{ row.trigger_time * 1000 | dateFormatter('YYYY-MM-DD hh:mm') }}
                </el-table-column>
                <el-table-column 
                    prop="sum" label="通知总人数" min-width="110" align="center">
                </el-table-column>
                <el-table-column 
                    prop="already_send_sum" label="已发送人数" min-width="110" align="center">
                </el-table-column>
                <el-table-column 
                    prop="status" label="任务状态" min-width="120" align="center">
                    <template #default="{ row }">
                        <span :class="`status-${row.status}`">
                            {{ statusType[row.status] ? statusType[row.status].name : '--' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="160" align="center">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleDrawer('detail', row)">
                            详情
                        </el-button>
                        <el-button type="text" @click="handleDrawer('edit', row)" v-if="row.status != 2">
                            编辑
                        </el-button>
                        <el-button type="text" @click="handleDel(row.name, row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group"></div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
        <md-drawer :visible.sync="drawerOptions.visible" :data="drawerOptions.data" @update="getData"></md-drawer>
        <detail-drawer :visible.sync="drawerOptions.detailVisible" :data="drawerOptions.detailData" source="create"></detail-drawer>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js"
import { objScreen, dateFormatter } from "@/common/js/util.js"
import mdDrawer from './md-drawer.vue'
import detailDrawer from '../detail-drawer.vue'
import { actionType, statusType } from '../action_types.js'
export default {
    components: { mdDrawer, detailDrawer },
    data() {
        return {
            searchContent: {
                type: '',                 // 群发类型
                name: '',                 // 群发名称
                start_time: '',           // 开始时间
                end_time: '',             // 结束时间 
                is_search: false          // 是否处于搜索
            },
            selectTime: '',               // 时间 [start, end]
            pageArr: {    
                curpage: 1,               // 当前页码
                pageSize: +localStorage.getItem('pageSize') || 20, // 每页显示数量
                total: 0                  // 数据总数
            },
            dataList: [],                 // 列表数据
            drawerOptions: {              // 基础参数
                visible: false,
                data: {},
                detailVisible: false,
                detailData: {}
            },
            actionType: actionType(true), // 群发类型
            statusType: statusType(true), // 任务状态
            oHeight: 600,
        }
    },
    computed: {
        getActionType() {
            return actionType()
        }
    },
    methods: {
        handleDateChange(val = null) {
            if (val) {
                this.searchContent.start_time = val[0] / 1000
                this.searchContent.end_time = val[1] / 1000
            } else {
                this.searchContent.start_time = null
                this.searchContent.end_time = null
            }
        },
        async getData() {
            try {
                let datas = {
                    limit: this.pageArr.pageSize,
                    page: this.pageArr.curpage
                }
                if (this.searchContent.is_search) {
                    datas = { ...datas, ...this.searchContent }
                }
                objScreen(datas)
                const res = await this.$http.post('/admin/marketing/index.php?act=message&op=list', datas)
                if (res.code == 200) {
                    this.dataList = res.data?.list || []
                    this.pageArr.total = +res.data.count
                }
            } catch (error) {
                error && this.$message.error(`${error}`)
            }
        },
        elTableIndex(index) {
            const { pageSize, curpage } = this.pageArr
            return index + 1 + (curpage - 1) * pageSize
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize)
            this.pageArr.pageSize = pageSize
            this.pageArr.curpage = 1
            this.getData()
        },
        handleCurrentChange(page) {
            this.pageArr.curpage = page
            this.getData()
        },
        handleSearch(is_search = true) {
            this.searchContent.is_search = is_search
            this.pageArr.curpage = 1
            this.getData()
        },
        handleReset() {
            this.selectTime = null
            this.$refs.searchFrom.resetFields()
            this.handleDateChange()
            if (!this.searchContent.is_search) return
            this.handleSearch(false)
        },
        handleDrawer(type = "add", row = {}) {
            if (type === "detail") {
                this.drawerOptions.detailVisible = true
                this.drawerOptions.detailData = row
            } else {
                this.drawerOptions.visible = true
                this.drawerOptions.data = row
            }
        },
        handleDel(name, id) {
            this.$alert(
                `确定删除：${name}？`, 
                "温馨提示", 
                {
                    type: 'warning',
                    showCancelButton: true
                }
            ).then(() => {
                this.$http.get("/admin/marketing/index.php?act=message&op=del", { params: { id } })
                .then(res => {
                    if (res.code == 200) {
                        this.$message.success("删除成功")
                        this.getData()
                    } else {
                        throw res.msg
                    }
                }).catch(error => {
                    error && this.$message.error(`${error}`)
                })
            }).catch(() => {})
        }
    },
    created() {
        this.getData()
    },
    mounted() {
        resize(this)
    }
}
</script>
<style lang="scss" scoped>
.add-btn {
    position: absolute;
    top: 10px;
    right: 12px;
}
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status-1 { color: #F56C6C }
.status-2 { color: #67C23A }
.status-3 { color: #E6A23C }
</style>
